<template>
  <div class="ycdwrap" >
    <div class="yc-table-wrp">
      <el-tree :data="data"  node-key="id" ref="hadCheck"  :default-expanded-keys="DefautCheck" :default-checked-keys="DefautCheck"  :props="defaultProps" show-checkbox  @check-change="handleNodeClick"></el-tree>
       <div class="yc-button-wrp">
         <el-checkbox :indeterminate="isIndeterminate" v-model="checkall" @change="totalCheck">全选</el-checkbox>
         <yc-button class="yc-button" @click="handleSave" value="保存"></yc-button>
         <yc-button class="yc-button" @click="handleCancel" value="取消"></yc-button>
       </div>
    </div>
  </div>
</template>

<script>
import request from 'request'
import ycButton from '@/components/button.vue'
export default {
  name: 'menuConfig',
  components: {
    ycButton
  },
  data () {
    return {
      checkall: false, // 全选
      cmdParams: null, // 存入localStorage 中当前查询对象的roleid 等数据，请求用，同时防止页面刷新数据清空
      roleId: '',
      DefautCheck: [],
      data: [], // 菜单数据
      allId: [],
      parentId: [],
      isIndeterminate: false,
      ids: [], // 保存 要发送后台的数据数组
      defaultProps: {
        children: 'children',
        label: 'label'
      }
    }
  },
  methods: {
    totalCheck (val) { // 全选与取消
      if (val) {
        this.isIndeterminate = false
        this.$refs.hadCheck.setCheckedKeys(this.parentId)
        this.DefautCheck = this.parentId
      } else {
        this.checkall = false
        this.isIndeterminate = false
        this.$refs.hadCheck.setCheckedKeys([])
      }
    },
    handleCancel () {
      this.$router.go(-1)
    },
    handleSave () {
      this.initData()
      var data = {
        ids: this.ids,
        roleId: this.cmdParams.row.roleId
      }
      request.updateMenuConfig(data).then(res => {
        if (res) {
          this.$message({
            message: '保存成功',
            type: 'success'
          })
        }
        setTimeout(() => {
          this.$router.push('/roleManage')
        }, 500)
      }).catch(e => {
        this.$message.error('保存失败')
      })
    },
    initData () {
      this.ids = []
      this.data.forEach(item => {
        this.allBack(item)
      })
      this.$refs.hadCheck.getCheckedKeys().forEach(item => {
        if (item === 2 || item === 3 || item === 4) {
          if (!(this.ids.indexOf('1/true') > -1)) {
            this.ids.push('1/true')
          }
        } else if (item === 6 || item === 7) {
          if (!(this.ids.indexOf('5/true') > -1)) {
            this.ids.push('5/true')
          }
        } else if (item === 9 || item === 10 || item === 11) {
          if (!(this.ids.indexOf('8/true') > -1)) {
            this.ids.push('8/true')
          }
        }
      })
    },
    allBack (item) {
      var str = ''
      if (this.$refs.hadCheck.getCheckedKeys().some(sing => {
        return (sing === item.id)
      })) {
        str = item.id + '/' + 'true'
        this.ids.push(str)
      } else {
        str = item.id + '/' + 'false'
        this.ids.push(str)
      }
      if (item.children) {
        if (!(this.parentId.indexOf(item.id) > -1)) {
          this.parentId.push(item.id)
        }
        item.children.forEach(i => {
          this.allBack(i)
        })
      }
    },
    handleNodeClick (data, val) {
      if (val) {
        if (this.parentId.indexOf(data.id) > -1) {
          this.DefautCheck.push(data.id)
        }
      }
      this.initData()
      this.checkall = this.$refs.hadCheck.getCheckedKeys().length === this.ids.length
      this.isIndeterminate = this.$refs.hadCheck.getCheckedKeys().length < this.ids.length && this.$refs.hadCheck.getCheckedKeys().length > 0
    },
    in (arr1, arr2) {
      arr2.every(item => {
        return (arr1.indexOf(item) > -1)
      })
    },
    init () {
      let datas = []
      if (this.cmdParams.row) {
        request.setMenuConfig(this.cmdParams.row.roleId).then(res => {
          this.data = res[0]
          datas = res[1]
          if (datas.indexOf(1) > -1) {
            datas.splice(datas.indexOf(1), 1)
          } else if (datas.indexOf(5) > -1) {
            datas.splice(datas.indexOf(5), 1)
          } else if (datas.indexOf(8) > -1) {
            datas.splice(datas.indexOf(8), 1)
          }
          this.DefautCheck = datas
          setTimeout(() => {
            this.initData()
            this.checkall = this.$refs.hadCheck.getCheckedKeys().length === this.ids.length
            this.isIndeterminate = this.$refs.hadCheck.getCheckedKeys().length < this.ids.length && this.$refs.hadCheck.getCheckedKeys().length > 0
          }, 100)
        })
      }
    }
  },
  beforeMount () {

  },
  mounted () {
    this.init()
  },
  created () {
    const tempData = localStorage.getItem('tempData')
    if (tempData) {
      this.cmdParams = JSON.parse(tempData)
    } else {
      this.cmdParams = this.$route.params
      localStorage.setItem('tempData', JSON.stringify(this.$route.params))
    }
  },
  beforeDestroy () {
    localStorage.removeItem('tempData')
  }
}
</script>

<style lang="stylus" scoped="scoped">
.yc-button-wrp{
  margin 10px 0 0 10px
  .yc-button{
    width 60px
    margin 10px
  }
  :nth-child(3){
    background-color #FFFFFF
    color #606266
    border-color #e4e4e4
  }
  :nth-child(3):focus{
    background-color #FFFFFF
    color #333
    border 1px solid #e4e4e4
  }
}
</style>
